<template>
	<div class="base-info-page">
		<NavHeader
			:title="t('orderSuccess.title', '预约完成')"
			:showStepProgress="true"
			:current="4"
		/>
		<div class="info-card-group">
			<!-- 成功icon和标题横排居中 -->
			<div class="success-row-center">
				<div class="success-icon">
					<svg width="48" height="48" viewBox="0 0 48 48">
						<defs>
							<linearGradient
								id="success-gradient"
								x1="0"
								y1="0"
								x2="1"
								y2="1"
							>
								<stop offset="0%" stop-color="#5BA3FF" />
								<stop offset="100%" stop-color="#0F68FE" />
							</linearGradient>
						</defs>
						<circle
							cx="24"
							cy="24"
							r="24"
							fill="url(#success-gradient)"
						/>
						<path
							d="M15 25.5l7 6 11-14"
							stroke="#FFFDF9"
							stroke-width="3"
							fill="none"
							stroke-linecap="round"
							stroke-linejoin="round"
						/>
					</svg>
				</div>
				<div class="success-title">
					{{ t('orderSuccess.success', '预约成功') }}
				</div>
			</div>
			<!-- 预约单号 -->
			<div class="info-card order-id-card">
				<span class="order-id-label">{{
					t('orderSuccess.orderId', '预约单号：')
				}}</span>
				<span class="order-id-value">{{ orderId }}</span>
			</div>
			<!-- 信息卡片 -->
			<div class="info-card info-detail-card">
				<div class="info-row">
					<span class="info-label">{{
						t('orderSuccess.address', '安装地址')
					}}</span>
					<span class="info-value">{{ address }}</span>
				</div>
				<div class="info-row">
					<span class="info-label">{{
						t('orderSuccess.name', '姓名')
					}}</span>
					<span class="info-value">{{ name }}</span>
				</div>
				<div class="info-row">
					<span class="info-label">{{
						t('orderSuccess.phone', '电话')
					}}</span>
					<span class="info-value">{{ phone }}</span>
				</div>
				<div class="info-row">
					<span class="info-label">{{
						t('orderSuccess.expectTime', '期望上门时间')
					}}</span>
					<span class="info-value expect-time">{{ expectTime }}</span>
				</div>
			</div>
		</div>
		<!-- 底部热线 -->
		<div class="hotline-bar-figma" @click="callHotline">
			<img
				src="@/assets/home/icon-kefu-blue.png"
				class="hotline-icon"
				:alt="t('orderSuccess.customerService', '客服')"
			/>
			<span class="hotline-text">{{
				t('orderSuccess.callHotline', '拨打客服热线')
			}}</span>
		</div>
	</div>
</template>

<script setup lang="ts">
import NavHeader from '@/components/NavHeader.vue'
import { ref, computed } from 'vue'
import { useOrderStore } from '@/stores/order'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const orderStore = useOrderStore()

const orderId = computed(() => orderStore.order_no || '')
const address = computed(() => orderStore.customer.address || '')
const name = computed(() => orderStore.customer.name || '')
const phone = computed(() => orderStore.customer.mobile || '')
const expectTime = computed(() => {
	// 格式化期望上门时间
	const dates = orderStore.customer.service_date
		? orderStore.customer.service_date.split(',')
		: []
	const time = orderStore.customer.service_time || ''
	if (dates.length === 2) {
		// 2025-05-15,2025-05-18 => 5月15日-5月18日
		const format = (d: string) => {
			const dt = new Date(d)
			return `${dt.getMonth() + 1}月${dt.getDate()}日`
		}
		return `${format(dates[0])}-${format(dates[1])} ${'\n'} ${time
			.split(',')
			.join('-')}`
	}
	return time
})
const hotline = ref('119')

function callHotline() {
	window.location.href = `tel:${hotline.value}`
}
</script>

<style scoped>
.base-info-page {
	background: #f3f4f6;
	min-height: 100vh;
	padding-bottom: 100px;
}

.info-card-group {
	padding: 32px 0 0 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
}

.success-row-center {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 8px;
	width: 100%;
}

.success-icon {
	width: 48px;
	height: 48px;
	margin-right: 12px;
}

.success-title {
	font-size: 20px;
	font-family: 'PingFang SC', sans-serif;
	font-weight: 700;
	color: #3c3c3c;
	letter-spacing: -0.3px;
}

.info-card {
	width: 95%;
	max-width: 450px;
	border-radius: 15px;
	background: #fff;
	box-shadow: none;
	margin: 0;
	border: 1px solid #eee;
	padding: 16px;
	position: relative;
}

.order-id-card {
	display: flex;
	align-items: center;
	font-size: 14px;
	color: #a0a0a0;
	font-family: 'PingFang SC', sans-serif;
	font-weight: 600;
	letter-spacing: -0.3px;
	height: 50px;
}

.order-id-label {
	margin-right: 8px;
}

.order-id-value {
	color: #a0a0a0;
	word-break: break-all;
}

.info-detail-card {
	display: flex;
	flex-direction: column;
	gap: 0;
	height: 190px;
	justify-content: center;
}

.info-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	font-family: 'PingFang SC', sans-serif;
	font-weight: 600;
	color: #363636;
	padding: 8px 0;
	border-bottom: 0.5px solid #b0b0b0;
}

.info-row:last-child {
	border-bottom: none;
}

.info-label {
	color: #a0a0a0;
	min-width: 70px;
}

.info-value {
	color: #363636;
	text-align: right;
	flex: 1;
	margin-left: 12px;
	word-break: break-all;
}

.info-value.expect-time {
	white-space: pre-line;
}

.hotline-bar-figma {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 24px;
	width: 120px;
	height: 30px;
	background: #fff;
	border-radius: 15px;
	box-shadow: 0 0 5px 0 rgba(157, 157, 157, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 30;
	cursor: pointer;
	margin: 0 auto;
}

.hotline-bar-figma > div,
.hotline-bar-figma > span {
	pointer-events: none;
}

.hotline-icon {
	width: 20px;
	height: 20px;
	margin-right: 8px;
}

.hotline-text {
	font-size: 12px;
	font-family: 'PingFang SC', sans-serif;
	font-weight: 500;
	color: #000;
	letter-spacing: -0.3px;
	line-height: 1;
}
</style>
